<template>
    <div class="single">
        <songListRow></songListRow>
        <el-empty 
    :image="`${url}/images/empty.png`"
    v-if="keyword==``||singles.length==0"
    :description="keyword==''?`咱 搜 不 到 任 何 歌 曲 呀！为 你 推 荐 以 下 内 容`:'咱 搜 不 到 任 何 歌 曲 呀！'"
    ></el-empty>
        <songline :col="index" :music="item"  v-for="(item,index) of singles" :key="index" :index="index"></songline>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import songListRow from '@/components/songListRow.vue'
import songline from "@/components/songline.vue"
import { url } from '@/apiUrl'
export default {
    components: {
        songline,
        songListRow,
    },
    data(){
        return {
            singles:[],            
        }
    },
    props:{
        keyword:null,
        url:null
    },
    watch:{
        keyword(newval,oldval){
            this.getSearch()
        } 
    },
    methods:{
        getSearch(){
            this.$store.commit("getSearch",[1,this.keyword,(data)=>{
            this.singles=data
            for (var i in data) {
            this.singles[i] = {
          title: data[i].music_name,
          author: data[i].singer_name,
          url: `${url}/${data[i].audio_url}`,
          pic: `${url}/${data[i].img_url}`,
          lrc: data[i].lyric,
          album: data[i].album_name
        }
      }
        }])
        }
    },
    mounted(){
        this.getSearch()
    }
}
</script>

<style></style>